<style lang="less">
    
</style>

<template>
	<modal :title="'修改角色'" :width="'800px'" :height="'30%'" :top="'150px'" @closeModal="closeModal">
		<template slot="body" >
			<Form ref="form" :rules="formValidate" :model="formItem" :label-width="100" label-position="left" >
				
				<div style="width: 700px; margin-left: 40px;">
				
					<Row type="flex" justify="center" :gutter="24">
				        <Col span="12" >
					      	<Form-item label="角色名称:" prop="name" >
				          		<Input v-model="formItem.name" placeholder="请输入" ></Input>
				        	</Form-item> 
				        </Col>
				    </Row>
				    
			    </div>
				    
		    </Form>
		    
		    <div style="text-align: center; position: absolute;bottom: 10px;right: 60px;">
		    	 <ButtonGroup>
			        <Button @click="editRole('form')" type="primary">修改</Button>
			        <Button @click="closeModal()">关闭</Button>
			    </ButtonGroup>
		    </div>
		    
		</template>
	</modal>
</template>

<script> 
export default {
	props: ["role_id"],
   	components: {},
    data () {
        return {
        	formItem: {},
        	formValidate: {
				name: [
					{required: true, message: '角色名称不能为空', trigger: 'blur'}
				],
			}
        };
    },
    watch:{},
    created(){
    	this.$axios.post(
			'Role/getRoleById.do', 
			{id: this.role_id}
		).then(res => {
			this.formItem = res.data;
		});
    },
    methods: {
    	editRole(name) {
			this.$refs[name].validate((valid) => {
				if(valid) {
					this.$axios.post(
						'Role/updateRole.do', 
						this.formItem
					).then(res => {
						this.$Notice.success({title: '修改成功！'});
						this.$emit("getRoleList");
						this.closeModal();
					});
				} else {
					this.$Message.warning('表单验证失败!');
				};
			});
		},
    	closeModal() {
	        this.$emit("input", false);
	    }
    }
};
</script>